<template>
  <div class="project-payment">
    <div class="table-container">
      <div class="table-container__table" v-loading="isLoadingTable">
        <template v-if="tableHeaderData.length">
          <el-table
            ref="clientManagerRef"
            :data="tableData"
            stripe
            border
            :summary-method="getSummaries"
            show-summary
            :header-cell-style="tableHeadStyle"
            :row-class-name="tableRowClassName"
          >
            <custom-table-column :table-headers="tableHeaderData" @handel-filter-data="handelFilterData" />
            <el-table-column label="操作" fixed="right" width="100">
              <template #default="{ row }">
                <el-button link type="primary" @click="handelDetail(row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--      start 分页  -->
          <custom-pagination
            :total="listTotal"
            :background="false"
            v-model:limit="tableParams.size"
            v-model:page="tableParams.current"
            layout="total, sizes ,prev, pager, next, jumper"
            @pagination="handelPage"
          />
          <!--      end 分页  -->
        </template>
        <el-empty v-else />
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, h } from "vue";
import { cloneDeep } from "lodash";
import CustomTableColumn from "./components/CustomTableColumn";
import { tableRowClassName } from "@/utils";
import { tableHeadStyle } from "@/config/config";
import { tableHeaders } from "./config/baseConfig";
import { projectPaymentList } from "@/apis/projectPayment";

const baseRouter = window.microApp.router.getBaseAppRouter();

/**
 * 表格数据
 */
const isLoadingTable = ref(false);
const tableData = ref([]);
const tableHeaderData = ref(cloneDeep(tableHeaders));
const listTotal = ref(0);
const receivedTotalAmount = ref("");
const shouldReceiveTotalAmount = ref("");
const tomeOutTotalAmount = ref("");
const tableParams = ref({
  current: 1,
  size: 10
});
const tableBody = ref({
  groupId: 0,
  groupSys: true,
  select: []
});
const getProjectPaymentList = async () => {
  try {
    isLoadingTable.value = true;
    const { data } = await projectPaymentList(tableParams.value, tableBody.value);
    const {
      receivedTotalAmount: receivedTotal,
      shouldReceiveTotalAmount: shouldReceiveTotal,
      tomeOutTotalAmount: tomeOutTotal,
      pageList
    } = data;
    receivedTotalAmount.value = receivedTotal ?? 0;
    shouldReceiveTotalAmount.value = shouldReceiveTotal ?? 0;
    tomeOutTotalAmount.value = tomeOutTotal ?? 0;
    listTotal.value = pageList?.total ?? 0;
    tableData.value = pageList?.list ?? [];
    isLoadingTable.value = false;
  } catch (err) {
    isLoadingTable.value = false;
    console.log("getEngineeringPageList>>>", err);
  }
};
const handelPage = val => {
  tableParams.value.current = val.page;
  tableParams.value.size = val.limit;
  getProjectPaymentList();
};

/**
 * 总计
 */
const getSummaries = param => {
  const { columns, data } = param;
  const totalColumnsMap = new Map([
    ["customerName", h("div", { style: {} }, ["总计"])],
    ["receiveTaskShouldAllAmount", h("div", { style: {} }, [`￥${receivedTotalAmount.value}`])],
    ["receivedTaskAllAmount", h("div", { style: {} }, [`￥${shouldReceiveTotalAmount.value}`])],
    ["timeOutAmount", h("div", { style: {} }, [`￥${tomeOutTotalAmount.value}`])]
  ]);

  const sums = [];
  columns.forEach((column, index) => {
    sums[index] = totalColumnsMap.has(column.property) ? totalColumnsMap.get(column.property) : "";
  });

  return sums;
};

/**
 * 筛选
 */
const handelFilterData = data => {
  const { filterData, columnIndex } = data;
  const _hasData = () => {
    return filterData?.some(item => {
      return item.value?.length && (item.value[0] || item.value[0] === 0);
    });
  };
  tableHeaderData.value[columnIndex].filterList = cloneDeep(filterData);
  tableHeaderData.value[columnIndex].isSetFilter = _hasData();
  tableBody.value.select = [];
  (tableHeaderData.value ??= [])
    .filter(item => {
      return item.isSetFilter;
    })
    .reduce(
      (pre, cur) => {
        pre.push(...cur.filterList);
        return pre;
      },
      (tableBody.value.select ??= [])
    );
  tableParams.value.current = 1;
  getProjectPaymentList();
};

/**
 * 详情
 */
const handelDetail = data => {
  baseRouter.push({
    path: "/crm/client-info",
    query: {
      funcTab: "paymentPlan",
      customerId: data.customerId,
      afterSalesType: data.afterSalesType,
      backPageUrl: "/projectmanage/project-payment"
    }
  });
};

getProjectPaymentList();
</script>

<style scoped lang="scss">
@import "projectPayment";
</style>
<style lang="scss">
// 可能原因: 自定义表头影响
// 没有使用插槽列
.project-payment {
  td {
    .cell {
      display: block !important;
    }
  }
}
</style>
